    <template>
        <div style="width: 100%; box-shadow: var(--el-border-color-light) 0px 0px 10px">
            <el-splitter>
                <el-splitter-panel :size="'80%'" style="height: 900px; padding: 10px;">
                    <div class="demo-panel">
                        <el-row :gutter="24">
                            <el-col :span="24" style="border-bottom: 1px black solid; padding-bottom: 10px;">
                                <el-button size="default" @click="printPage" plain><el-icon>
                                        <Printer />
                                    </el-icon>打印</el-button>
                                <el-button size="default" @click="upd" plain><el-icon>
                                        <Edit />
                                    </el-icon>编辑</el-button>
                                <el-button size="default" @click="Delete" plain><el-icon>
                                        <CopyDocument />
                                    </el-icon>删除</el-button>

                            </el-col>


                            <el-col :span="24">
                                <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                    <el-form-item label="简历信息" label-position="top"
                                        :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                        <div class="progress-bar">
                                            <div class="progress"></div>
                                        </div>
                                    </el-form-item>

                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light">
                                    <el-form-item label="发放时间" label-position="top" required>
                                        <el-input v-model="DataInformation.distributionTime" clearable
                                            style="width: 260px;" disabled />

                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple">
                                    <el-form-item label="offer状态" label-position="top" disabled>
                                        <el-input v-model="DataInformation.offerStatus" style="width: 260px" disabled />
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!--  -->
                            <el-col :span="24">
                                <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                    <el-form-item label="候选人报道信息" label-position="top"
                                        :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                        <div class="progress-bar">
                                            <div class="progress"></div>
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>

                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="所属需求编号"
                                        label-position="top" required>
                                        <el-input v-model="DataInformation.theLocationNumber" style="width: 260px;"
                                            clearable disabled />
                                    </el-form-item>
                                </div>
                            </el-col>

                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="简历信息"
                                        label-position="top" required>
                                        <div class="el-form-item__content">

                                            <el-input v-model="DataInformation.applicantId" style="width: 260px"
                                                disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!--  -->
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="候选人姓名"
                                        label-position="top" required>
                                        <div class="el-form-item__content">

                                            <el-input v-model="DataInformation.candidateresume.candidatename"
                                                style="width: 260px" disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="offer岗位"
                                        label-position="top" required>
                                        <div class="el-form-item__content">

                                            <el-input v-model="DataInformation.candidateresume.intendedPosition"
                                                style="width: 260px" disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="入职部门"
                                        label-position="top" required>
                                        <div class="el-form-item__content">
                                            <el-input v-model="DataInformation.department.deptName" style="width: 260px"
                                                disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!--  -->
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="手机号"
                                        label-position="top" required>
                                        <div class="el-form-item__content">

                                            <el-input v-model="DataInformation.candidateresume.cellPhone"
                                                style="width: 260px" disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="邮箱"
                                        label-position="top" required>
                                        <div class="el-form-item__content">

                                            <el-input v-model="DataInformation.candidateresume.mailbox"
                                                style="width: 260px" disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="试用期"
                                        label-position="top" required>
                                        <div class="el-form-item__content">
                                            <el-input v-model="DataInformation.probationPeriod" style="width: 260px;"
                                                disabled></el-input>
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="试用期薪酬（元）"
                                        label-position="top" required>
                                        <div class="el-form-item__content">

                                            <el-input v-model="DataInformation.probationarySalary" style="width: 260px"
                                                disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!--  -->
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="转正薪酬（元）"
                                        label-position="top" required>
                                        <div class="el-form-item__content">

                                            <el-input v-model="DataInformation.salary" style="width: 260px" disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="报到日期"
                                        label-position="top" required>
                                        <div class="el-form-item__content">
                                            <el-input v-model="DataInformation.reportedDate" style="width: 260px;"
                                                disabled></el-input>
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="报道地址报道地址"
                                        label-position="top" required>
                                        <div class="el-form-item__content">
                                            <el-input v-model="DataInformation.reportingAddress" style="width: 260px;"
                                                disabled></el-input>

                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!--  -->
                            <el-col :span="24">
                                <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                    <el-form-item v-model="DataInformation.candidateresume.candidatename"
                                        label-position="top"
                                        :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                        <div class="progress-bar">
                                            <div class="progress"></div>
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!--  -->
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="联系人姓名"
                                        label-position="top" required>
                                        <div class="el-form-item__content">

                                            <el-input v-model="DataInformation.candidateresume.candidatename"
                                                style="width: 260px" disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col><el-col :span="8">
                                <div class="grid-content ep-bg-purple-light"><el-form-item label="联系人电话"
                                        label-position="top" required>
                                        <div class="el-form-item__content">

                                            <el-input placeholder="1008611" style="width: 260px" disabled />
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!--  -->
                            <el-col :span="24">
                                <hr>
                                <div class="grid-content ep-bg-purple-light"><el-descriptions title="" :column="2"
                                        direction="horizontal">
                                        <el-descriptions-item label="提交人："> <el-text class="mx-1" type="primary">{{
                                            DataInformation?.candidateresume.screenpeople
                                                }}</el-text></el-descriptions-item>
                                        <el-descriptions-item label="提交时间：">{{ DataInformation?.submit
                                            }}</el-descriptions-item>
                                        <el-descriptions-item label="更新时间：" :span="2">{{ DataInformation?.submit
                                            }}</el-descriptions-item>
                                    </el-descriptions>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                </el-splitter-panel>
                <!--  -->
                <el-splitter-panel :max="260">
                    <div class="demo-panel" style="padding: 6px;">
                        <el-tabs v-model="DefaultDataComments" tab-position="top" @tab-click="DataComment">
                            <el-tab-pane label="数据日志" name="first">
                                <div class="card-container">
                                    <el-card style="width: 250px;margin-bottom: 5zpx;" v-for="item in operationDataContent">
                                        <el-row :gutter="24">
                                            <el-col :span="12" style="padding: 5px;">操作人：</el-col>
                                            <el-col :span="12" style="font-size: 10px ; padding: 5px;">2025-07-09
                                                09:45</el-col>
                                            <el-col :span="12"
                                                style="font-size: 12px ; padding: 5px; color:rgb(102, 177, 255)">{{
                                                    item.employee.employeeName }}</el-col>
                                            <el-col :span="12"
                                                style="font-size: 12px ; padding: 5px; color:rgb(102, 177, 255)">{{
                                                    item.operationType }}1</el-col>
                                            <el-col :span="12" style="font-size: 12px ; padding: 5px;"><el-icon>
                                                    <Tickets />
                                                </el-icon>简历状态：</el-col>
                                            <el-col :span="12" style="font-size: 12px;"></el-col>

                                            <template v-if="item.offermanagementtable.offerStatus ==='待入职'">
                                                <el-col :span="12" style="font-size: 12px;"><el-button type="danger"
                                                        size="small" plain round
                                                        class="line-through-btn">offer已发送</el-button></el-col>
                                                <el-col :span="12" style="font-size: 12px;"></el-col>
                                            </template>

                                            <template v-if="item.offermanagementtable.offerStatus === '待发offer'">
                                                <el-col :span="12" style="font-size: 12px;"><el-button type="success"
                                                        size="small" plain round
                                                        class="line-through-btn">待发offer</el-button></el-col>
                                            </template>
                                        </el-row>

                                    </el-card>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="评论" name="second">
                                <div ref="commentContainerRef" style="height: 800px;overflow: auto;">
                                    <div style="position: relative;height: 800px"
                                        v-if="!commentDataContent || commentDataContent.length === 0">
                                        <!-- 父级设置相对定位 -->
                                        <a-empty style="
                                    position: absolute; /* 子元素绝对定位 */
                                    top: 50%;          /* 垂直方向距离顶部50% */
                                    left: 50%;         /* 水平方向距离左侧50% */
                                    transform: translate(-50%, -50%); /* 向左、向上偏移自身50%，实现精准居中 */
                                    " />
                                    </div>
                                    <a-comment v-for="item in commentDataContent" :author="item.employee.employeeName"
                                        avatar="https://images.unsplash.com/photo-1747767763480-a5b4c7a82aef?q=80&w=2704&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                        :content="item.content" :datetime="item.createdAt"
                                        style="border: 1px solid #eee; border-radius: 10px; padding: 2px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); max-width: 300px;">
                                        <template #actions>
                                            <span class="action" key="heart" @click="onLikeChange">
                                                <span v-if="like">
                                                    <IconHeartFill :style="{ color: '#f53f3f' }" />
                                                </span>
                                                <span v-else>
                                                    <IconHeart />
                                                </span>
                                                {{ 0 + (like ? 1 : 0) }}
                                            </span>
                                        </template>
                                    </a-comment>
                                </div>
                                <div style="display: flex; justify-content: center; width: 100%;">
                                    <el-input placeholder="留下你的精彩评论吧(Enter：发送)" clearable v-model="content"
                                        style="width: 250px; font-size: 12px;" @keyup.enter="sendComment" />
                                </div>
                            </el-tab-pane>
                        </el-tabs>

                    </div>
                </el-splitter-panel>
            </el-splitter>
        </div>
        <el-dialog title="修改" v-model="TalentModificationDisplay" fullscreen destroy-on-close>
            <hr>
            <update :data="dataNumber"></update>
        </el-dialog>

    </template>
<script setup lang="ts">
import request from '@/api/request'
import { ref, unref, nextTick, defineProps } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import update from "@/views/recruitment/OfferManagement/update.vue"

const number = defineProps(["data"])

const popoverRef = ref() //弹窗
const DefaultDataComments = ref('first')//数据评论默认值 
const TalentModificationDisplay = ref(false)//修改弹窗显示
console.log("我获取的数据", number);
const dataNumber = ref(null) // 传递数据编号
//打印
const printPage = () => {
    window.print()
}

const Delete = () => {
    ElMessageBox.confirm(
        '你确定要删除所选数据吗？',
        '通知',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '取消操作',
            })

        })
}



// 点击外部关闭
const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.()
    console.log("点击了");
}



const DataComment = (tab: TabsPaneContext, event: Event) => {
    //点击评论时触发commentData（）
    if (tab.paneName === "second") {
        commentData()
    }
    console.log(tab, event)
}


const ResumeInformation = ref()//简历信息数据
const ResumeInformationData = ref([
    { id: "intendedPosition", label: '意向岗位', width: '160' },
    { id: "typeofjobapplication", label: '应聘类型', width: '160' },
    { id: "candidatename", label: '姓名', width: '160' },
    { id: "gender", label: '性别', width: '160' },
    { id: "cellPhone", label: '手机号', width: '160' },
    { id: "dateOfBirth", label: '出生年月', width: '160' },
    { id: "age", label: '年龄', width: '160' },
    { id: "degree", label: '学历', width: '160' },
    { id: "specialized", label: '专业', width: '160' },
    { id: "graduationTime", label: '毕业时间', width: '160' },
    { id: "school", label: '毕业院校', width: '160' },
    { id: "marriageAndChildbearing", label: '婚育情况', width: '160' },
    { id: "lastWork", label: '工作经历', width: '160' },
    { id: "resumeStatus", label: '简历状态', width: '160' },
])//简历信息   
const DataInformation = ref({
    applicantId: '',
    offerStatus: '',
    candidateresume: {
        intendedPosition: '',
        typeofjobapplication: '',
        candidatename: '',
        gender: '',
        cellPhone: '',
        dateOfBirth: '',
        age: '',
        degree: '',
        specialized: '',
        graduationTime: '',
        school: '',
        marriageAndChildbearing: '',
        lastWork: '',
        resumeStatus: '',
        mailbox: '',
        screenpeople: '',

    }, department: {
        deptName: '',
    },
    distributionTime: '',
    offerid: '',
    probationPeriod: '',
    probationarySalary: '',
    recruitmentPositions: '',
    remark: '',
    reportedDate: '',
    reportingAddress: '',
    salary: '',
    senderBy: '',
    submit: '',
    theLocationNumber: '',

});
const resumeInformation = () => { //简历信息方法
    request({
        url: '/offermanagementtable/finfindByResumeId',
        method: 'get',
        params: { applicanId: number.data }
    })
        .then(res => {
            DataInformation.value = res.data
            operationData()
        })
}
resumeInformation()

const upd = () => { //编辑事件
    TalentModificationDisplay.value = true;
    dataNumber.value = DataInformation.value.applicantId //传递数据编号
    console.log("传递的数据编号", dataNumber.value);

}
const operationDataContent = ref([]) //操作数据内容
const operationData = () => { //操作数据方法
    console.log("offerid", DataInformation.value.offerid);

    request({
        url: '/dataoperationrecordsheet/getById',
        method: 'get',
        params: { operationTargetId: DataInformation.value.offerid }
    }).then(res => {
        console.log("操作数据", res.data);
        operationDataContent.value = res.data //操作数据内容

    })
}


const commentDataContent = ref([]) //评论数据
const commentContainerRef = ref(null) // 评论容器引用

// 滚动到底部的方法
const scrollToBottom = () => {
    nextTick(() => {
        if (commentContainerRef.value) {
            commentContainerRef.value.scrollTop = commentContainerRef.value.scrollHeight
        }
    })
}

const commentData = () => { //评论数据方法
    console.log("offerid", DataInformation.value.offerid);
    
    request({
        url: '/comments/queryCommentsWithTheBoundID',
        method: 'get',
        params: {
            boundId: DataInformation.value.offerid
        }
    }).then(res => {
        console.log(res.data);
        commentDataContent.value = res.data
        console.log('commentDataContent', commentDataContent.value);

        // 数据加载完成后滚动到底部
        scrollToBottom()
    })
}

const like = ref(false);//点赞
const onLikeChange = () => { //点赞功能
    like.value = !like.value; //改变like的值
};
const content = ref('') //评论内容
const commentUserId = ref(1);
// 获取session中的用户信息 - 需要解析JSON字符串
let user = JSON.parse(sessionStorage.getItem('user') || '{}');
console.log("当前用户编号",user.employeeId);
const data = ref();
const sendComment = () => {  //发送评论
    data.value = {
        content: content.value,
        commentUserId: user.employeeId,
        targetId: DataInformation.value.offerid
    }
    request({
        url: "/comments/insert",
        method: 'post',
        data: data.value
    }).then(res => {
        console.log(res.data);
        ElMessage.success("发送成功")
        content.value = ''
        commentData()
        scrollToBottom() // 发送成功后滚动到底部
    })
}


const a = ref()
const b = ref()

const InterviewerButton = () => {
    unref(a).a?.b?.()
}
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}



/* 单选框选中样式 */
.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}

.card-container {
    display: flex;
    /* 卡片排列方式 */
    flex-wrap: wrap;
    /* 卡片之间的间距 */
    justify-content: center;
    /* 居中 */
}

/* 删除按钮样式 */
.line-through-btn {
    text-decoration: line-through;
}
</style>